<!DOCTYPE html>

<html>

	<head>
		<meta charset="utf-8">
		<title> 命令模拟器文档 </title>
        <!-- <link href="./css/style_index.css" rel="stylesheet" type="text/css" media="all" /> -->
	</head>

	<style>
		.cb_window{
			width: 80%;
			height: 60px;
		}
		body {
			background-color: rgba(0, 26, 255, 0.118);
		}
		body canvas{
			border-radius: 20px;
			margin: 0px auto;
			margin-bottom: 50px;
		}
		#header .inner{
			position: fixed;
			top: 0px;
			background-color: #5f5f5f;
			border-bottom-left-radius: 10px ;
			border-bottom-right-radius: 10px ;
			width: 98.5%;
			height: 70px;
		}
		#topmenu {
			margin: auto auto;
			font-size: xx-large;
			color: white;
			font-weight: 900;
			text-align: center;
		}
		.table_1{
			display: flex;
			width: 87%;
			margin: 0px auto;
		}
		.table_2_0{
			width: 50%;
			height: 350px;
		}
		.table_3{
			background-color: white;
			width: 80%;
			height: 80%;
			margin: 10% auto;
			border-radius: 10px;
			text-align: center; 
		}
		.fast_tp{
			margin: 0px auto;
			margin-top: 40px;
			width: 90%;
			height: 60px;
			border-radius: 10px;
			display: flex;
			background-color: rgb(215, 255, 242);
		}
		.fast_tp div{
			font-size: 25px;
			padding-top: 13px;
			text-align: center;
			width: 20%;
			font-weight: 600;
		}
		.fast_tp div:hover{
			transition: 0.9s;
			background-color: rgb(52, 255, 187);
		}
		.help{
			padding-top: 8px;
			width: 800px;
			margin: 0px auto;
			display: flex;
			font-size: 27px;
			background: #ffffff;
			border-radius: 10px;
		}
	</style>

	<body>

		<header id="header">
			<div class="inner">
				<div style="height: 13px;"></div>
				<div id="topmenu">
					<span>命&emsp;令&emsp;模&emsp;拟&emsp;器&emsp;帮&emsp;助&emsp;文&emsp;档</span>
				</div>
			</div>
		</header>

		<div class="cb_window" id="cb_window"></div>

		<div class="fast_tp">
			<div style="border-right: 5px solid black; font-size: 30px; padding-top: 10px; color: dimgrey;">导航界面</div>
			<div onclick="fast_jump_1()" style="border-right: 5px solid black">命令语法检查</div>
			<div onclick="fast_jump_2()" style="border-right: 5px solid black">命令方块视图</div>
			<div onclick="fast_jump_3()" style="border-right: 5px solid black">命令运行反馈</div>
			<div onclick="fast_jump_4()" style="border-right: 5px solid black">官方网站</div>
		</div>
		
		<div style="padding-top: 50px;"></div>
		<div class="help">
			<img src="./picture/tutorial/warning.png" alt="" width="120" height="120">
			<span style="color: red;">请仔细阅读帮助文档的内容，否则你将无从下手。安卓用户需要将浏览器设置成小窗模式，并且将Pydroid 3变为前台模式，才能正常访问帮助文档。</span>
		</div>

		<div class="table_1">
			<div class="table_2_0">
				<div class="table_3">
					<div style="padding: 15px 0px; font-size: 40px; font-weight: 700;">使用须知<samp style="color: red;">(重要)</samp></div>
					<div style="padding: 3px 0px; font-size: 25px; font-weight: 400;">模拟器的使用说明书</div>
					<div style="padding: 3px 0px; font-size: 25px; font-weight: 400;">请务必观看此条目</div>
					<div style="padding: 3px 0px; font-size: 25px; font-weight: 400;">避免在使用时踩坑</div>
					<div style="padding: 6px 0px; font-size: 25px; font-weight: 400; width: 50%; margin: 3% auto; background-color: rgb(170, 231, 255); border-radius: 10px;" onclick="jump_1()">点击查看 ➔</div>
				</div>
			</div>
			<div class="table_2_0">
				<div class="table_3">
					<div style="padding: 15px 0px; font-size: 40px; font-weight: 700;">世界配置</div>
					<div style="padding: 3px 0px; font-size: 25px; font-weight: 400;">学习如何修改世界配置</div>
					<div style="padding: 3px 0px; font-size: 25px; font-weight: 400;">解决世界配置的疑问</div>
					<div style="padding: 3px 0px; font-size: 25px; font-weight: 400;">预防在开始时出错</div>
					<div style="padding: 6px 0px; font-size: 25px; font-weight: 400; width: 50%; margin: 3% auto; background-color: rgb(170, 231, 255); border-radius: 10px;" onclick="jump_2()">点击查看 ➔</div>
				</div>
			</div>
		</div>

		<div class="table_1">
			<div class="table_2_0">
				<div class="table_3">
					<div style="padding: 15px 0px; font-size: 40px; font-weight: 700;">命令调试</div>
					<div style="padding: 3px 0px; font-size: 25px; font-weight: 400;">专属模拟器的调试命令</div>
					<div style="padding: 3px 0px; font-size: 25px; font-weight: 400;">还原MC命令系统的架构</div>
					<div style="padding: 3px 0px; font-size: 25px; font-weight: 400;">预先发现命令错误</div>
					<div style="padding: 6px 0px; font-size: 25px; font-weight: 400; width: 50%; margin: 3% auto; background-color: rgb(170, 231, 255); border-radius: 10px;" onclick="jump_3()">点击查看 ➔</div>
				</div>
			</div>
		</div>

		<div class="cb_window" id="cb_window"></div>

  	</body>
	
	<script>
		function fast_jump_1(){window.location.href='http://localhost:32323/command_load.html';}
		function fast_jump_2(){window.location.href='http://localhost:32323/command_block_view.html';}
		function fast_jump_3(){window.location.href='http://localhost:32323/command_respones.html';}
		function fast_jump_4(){window.location.href='https://commandsimulator.great-site.net';}

		function jump_1(){window.location.href='http://localhost:32323/tutorial/Instructions.html';}
		function jump_2(){window.location.href='http://localhost:32323/tutorial/WorldConfig.html';}
		function jump_3(){window.location.href='http://localhost:32323/tutorial/CommandDebug.html';}
		function jump_4(){window.location.href='http://localhost:32323/tutorial/ExpandPack.html';}
		function jump_5(){window.location.href='http://localhost:32323/tutorial/';}
		function jump_6(){window.location.href='http://localhost:32323/tutorial/';}
	</script>

  	<script type="module">
		import * as THREE from "/js/three.module.js";
		import {OrbitControls} from "/js/OrbitControls.js";

		function creat_block (texture_list) {
			var material_list = [];//上下左右前后
			for (let index1 = 0; index1 < 6; index1++) {
				const texture1 = new THREE.TextureLoader().load(texture_list[index1]);
				const material1 = new THREE.MeshLambertMaterial( {color:0xffffff,map: texture1} );
				material1.transparent = true;
				texture1.magFilter = THREE.NearestFilter;
				material_list.push(material1)
			}
			const geometry = new THREE.BoxGeometry( 1, 1, 1 );
			const cube = new THREE.Mesh( geometry, [material_list[2],material_list[3],material_list[0],material_list[1],material_list[4],material_list[5]] );
			return cube
		}

		
		const width1 = document.getElementById('cb_window').clientWidth;
		const height1 = 400;

		const scene = new THREE.Scene();
		const camera = new THREE.PerspectiveCamera( 75, width1/height1, 0.1, 1000 );

		const renderer = new THREE.WebGLRenderer({antialias: true});
		renderer.setSize( width1, height1 );
		document.body.appendChild( renderer.domElement );

		// 环境光
		const light = new THREE.AmbientLight(0xfaffff); // soft white light
		scene.add(light);

		// 平行光源
		const directionalLight = new THREE.DirectionalLight(0xffffff, .6);
		directionalLight.position.set(0, 1000, 0);
		scene.add(directionalLight); 

		
		const controls = new OrbitControls( camera, renderer.domElement );
		controls.minDistance = 5;
		
		const cube1 = creat_block(['picture/block/command_block_front_mipmap.png','picture/block/command_block_back_mipmap.png',
		'picture/block/command_block_side_mipmap.png','picture/block/command_block_side_mipmap.png',
		'picture/block/command_block_side_mipmap.png','picture/block/command_block_side_mipmap.png'])
		scene.add(cube1);
		const cube2 = creat_block(['picture/block/command_block_front_mipmap.png','picture/block/command_block_back_mipmap.png',
		'picture/block/command_block_conditional_mipmap.png','picture/block/command_block_conditional_mipmap.png',
		'picture/block/command_block_conditional_mipmap.png','picture/block/command_block_conditional_mipmap.png'])
		scene.add(cube2);
		const cube3 = creat_block(['picture/block/chain_command_block_front_mipmap.png','picture/block/chain_command_block_back_mipmap.png',
		'picture/block/chain_command_block_side_mipmap.png','picture/block/chain_command_block_side_mipmap.png',
		'picture/block/chain_command_block_side_mipmap.png','picture/block/chain_command_block_side_mipmap.png'])
		scene.add(cube3);
		const cube4 = creat_block(['picture/block/chain_command_block_front_mipmap.png','picture/block/chain_command_block_back_mipmap.png',
		'picture/block/chain_command_block_conditional_mipmap.png','picture/block/chain_command_block_conditional_mipmap.png',
		'picture/block/chain_command_block_conditional_mipmap.png','picture/block/chain_command_block_conditional_mipmap.png'])
		scene.add(cube4);
		const cube5 = creat_block(['picture/block/repeating_command_block_front_mipmap.png','picture/block/repeating_command_block_back_mipmap.png',
		'picture/block/repeating_command_block_side_mipmap.png','picture/block/repeating_command_block_side_mipmap.png',
		'picture/block/repeating_command_block_side_mipmap.png','picture/block/repeating_command_block_side_mipmap.png'])
		scene.add(cube5);
		const cube6 = creat_block(['picture/block/repeating_command_block_front_mipmap.png','picture/block/repeating_command_block_back_mipmap.png',
		'picture/block/repeating_command_block_conditional_mipmap.png','picture/block/repeating_command_block_conditional_mipmap.png',
		'picture/block/repeating_command_block_conditional_mipmap.png','picture/block/repeating_command_block_conditional_mipmap.png'])
		scene.add(cube6);

		camera.position.z = 5;
		cube1.rotation.x = 0.55;
		cube1.position.y = 1.5;
		cube2.rotation.x = 0.25;
		cube2.position.y = -1.5;

		cube3.rotation.x = 0.55;
		cube3.position.x = -2.85;
		cube3.position.y = 1.5;
		cube4.rotation.x = 0.25;
		cube4.position.x = -2.5;
		cube4.position.y = -1.5;

		cube5.rotation.x = 0.55;
		cube5.position.x = 2.85;
		cube5.position.y = 1.5;
		cube6.rotation.x = 0.25;
		cube6.position.x = 2.5;
		cube6.position.y = -1.5;

		function animate() {
			requestAnimationFrame( animate );
			cube1.rotation.y += 0.01;
			cube2.rotation.y += 0.01;
			cube3.rotation.y += 0.01;
			cube4.rotation.y += 0.01;
			cube5.rotation.y += 0.01;
			cube6.rotation.y += 0.01;
			controls.target.x = 0
			controls.target.y = 0
			controls.target.z = 0
			renderer.render( scene, camera );
		};

		animate();
	</script>

</html>